<template>
  <p class="lif-divider">
    <slot></slot>
  </p>
</template>

<script>
  export default {
    name: 'divider'
  }
</script>

<style>
  .lif-divider {
    display: table;
    white-space: nowrap;
    height: auto;
    overflow: hidden;
    line-height: 1;
    text-align: center;
    padding: .25rem 0;
    color: #666;
    font-size: .3rem;
  }
  .lif-divider:after,.lif-divider:before {
    content: '';
    display: table-cell;
    position: relative;
    top: 50%;
    width: 50%;
    background-repeat: no-repeat;
    background-image: url()
  }
  .lif-divider:before {
    background-position: right 1em top 50%
  }
  .lif-divider:after {
    background-position: left 1em top 50%
  }
</style>
